import 'package:flutter/material.dart';

class CarePage extends StatefulWidget {
  const CarePage({super.key, required this.animationController});

  final AnimationController animationController;

  @override
  State<CarePage> createState() => _CarePageState();
}

class _CarePageState extends State<CarePage>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //进入的时候先text title image ENTER
    //我们少了一个动画
    var slideInAnimation =
        Tween(begin: const Offset(1, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: const Interval(0.2, 0.4)))
            .animate(widget.animationController);
    var slideOutAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-1, 0))
            .chain(CurveTween(curve: const Interval(0.4, 0.6)))
            .animate(widget.animationController);
    //chain,parent 实际上没有区别
    var titleAnimation = Tween(
      begin: const Offset(0, 0),
      end: const Offset(-1.4, 0),
    )
        .chain(CurveTween(curve: Curves.easeInOut))
        .chain(CurveTween(curve: const Interval(0.4, 0.6)))
        .animate(widget.animationController);
    var titleInAnimation =
        Tween(begin: const Offset(1.4, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.2, 0.4)))
            .animate(widget.animationController);
    //原来text和image的交错，并不是interval合适offset不同
    var textAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.4, 0.6)))
            .animate(widget.animationController);
    var imageAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-2, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.4, 0.6)))
            .animate(widget.animationController);
    var imageInAnimation =
        Tween(begin: const Offset(2, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.2, 0.4)))
            .animate(widget.animationController);
    return SlideTransition(
      position: slideInAnimation,
      child: Scaffold(
        body: Container(
          padding: const EdgeInsets.symmetric(horizontal: 18.0),
          decoration:
              const BoxDecoration(color: Color.fromRGBO(245, 235, 226, 1)),
          child: SlideTransition(
            position: slideOutAnimation,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SlideTransition(
                  position: imageInAnimation,
                  child: SlideTransition(
                    position: imageAnimation,
                    child: Image.asset(
                        "assets/introduction_animation/care_image.png",
                        fit: BoxFit.cover),
                  ),
                ),
                SlideTransition(
                  position: titleInAnimation,
                  child: SlideTransition(
                    position: titleAnimation,
                    child: const Text(
                      "Care",
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                SlideTransition(
                  position: textAnimation,
                  child: const Text(
                    "Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore",
                    textAlign: TextAlign.center,
                  ),
                ),
                const SizedBox(height: 10),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
